<template>
  <div>
    <el-date-picker v-model="startDate" type="date" placeholder="开始日期"></el-date-picker>
    <el-date-picker v-model="endDate" type="date" placeholder="结束日期"></el-date-picker>
    <el-button @click="fetchData">获取数据</el-button>
    <el-select v-model="exportFormat" placeholder="选择导出格式">
      <el-option label="Excel" value="xlsx"></el-option>
      <el-option label="CSV" value="csv"></el-option>
    </el-select>
    <el-input v-model="exportFileName" placeholder="输入文件名"></el-input>
    <el-button @click="exportData">导出数据</el-button>
    <div ref="chart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import ExcelJS from "exceljs";
import * as echarts from "echarts";
import axios from "axios";

export default {
  data() {
    return {
      startDate: "",
      endDate: "",
      exportFormat: "xlsx",
      exportFileName: "服务评价不满意率",
      cityLevel: "",
      city: "",
      district: "",
      dateRange: "",
      orderType: "",
      startTime: "",
      endTime: ""
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    async drawChart() {
      try {
        const response = await axios.get("http://localhost:9999/api-statistics/orders/driver-ratings");
        const data = response.data;
        let chart = this.$echarts.init(this.$refs.chart);
        let option = {
          title: {
            text: "服务评价统计",
            textStyle: {
              color: "#333",
              fontSize: 16
            }
          },
          tooltip: {},
          xAxis: {
            data: data.map(item => item.rating),
            axisLabel: {
              color: "#666",
              fontSize: 12
            }
          },
          yAxis: {
            axisLabel: {
              color: "#666",
              fontSize: 12
            }
          },
          series: [
            {
              name: "评价人数",
              type: "bar",
              barWidth: 60,
              itemStyle: {
                color: "#F39423"
              },
              data: data.map(item => item.count)
            }
          ]
        };
        chart.setOption(option);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    },
    async fetchData() {
      try {
        const response = await this.axios.get("http://localhost:9999/api-statistics/orders/driver-ratings", {
          params: {
            startDate: this.startDate,
            endDate: this.endDate
          }
        });
        const data = response.data;
        this.drawChart();
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    },
    exportData() {
      const format = this.exportFormat;
      const fileName = this.exportFileName || "服务评价不满意率";
      if (format === "xlsx") {
        // 原有的Excel导出逻辑
        const workbook = new ExcelJS.Workbook();
        const worksheet = workbook.addWorksheet("Sheet1");

        const chart = echarts.getInstanceByDom(this.$refs.chart);
        const base64Image = chart.getDataURL({
          pixelRatio: 2,
          backgroundColor: "#fff"
        });
        let image = workbook.addImage({
          base64: base64Image,
          extension: "png"
        });
        worksheet.addImage(image, "A1:J20");
        workbook.xlsx.writeBuffer().then(function (buffer) {
          saveAs.saveAs(
              new Blob([buffer], {
                type: "application/octet-stream"
              }),
              fileName + ".xlsx"
          );
        });
      } else if (format === "csv") {
        // 这里需要添加CSV导出逻辑，目前只是一个占位
        console.log("CSV export logic needs to be added");
      }
    }
  }
};
</script>

<style scoped>
.el-button {
  margin-right: 10px;
}
</style>
